<template>
  <div class="main-box">
    <tr id="table-title">
      <th style="width: 80px"><div>编号</div></th>
      <th style="width: 190px"><div>简称</div></th>
      <th style="width: 364px"><div>全称</div></th>
      <th style="width: 80px"><div>阶段</div></th>
      <th style="width: 110px"><div>城市</div></th>
      <th style="width: 90px"><div>费用</div></th>
      <th style="width: 95px"><div>编辑</div></th>
      <th style="width: 140px"><div>附件与里程碑</div></th>
    </tr>
    <div class="my-table-box">
      <template v-for="(tableItem, tabIndex) in tableData">
        <tr id="table-body" :key="tabIndex" @click="clickProject(tableItem)">
          <td
            rowspan="2"
            style="border-left: 0.5px solid #eee9e9; vertical-align: middle"
          >
            <div style="width: 80px">
              {{ tableItem.procode }}
            </div>
          </td>
          <td>
            <div style="width: 188.5px">{{ tableItem.proshortname }}</div>
          </td>
          <td>
            <div class="pro-name-box">
              {{ tableItem.proname }}
            </div>
          </td>
          <td>
            <div style="width: 79.5px">{{ tableItem.stageName }}</div>
          </td>
          <td>
            <div style="width: 110px">{{ tableItem.procity }}</div>
          </td>
          <td rowspan="2">
            <div style="width: 89px">
              <div class="update-btn" @click="handCost(tableItem)">费用</div>
            </div>
          </td>
          <td rowspan="2">
            <div style="width: 94.5px">
              <div class="collection-btn" @click="handUpdate(tableItem)">
                编辑
              </div>
            </div>
          </td>
          <td rowspan="2">
            <div style="width: 124.5px">
              <div
                class="mil-anne-btn"
                @click="handAnnexAndMilestone(tableItem)"
              >
                附件与里程碑
              </div>
            </div>
          </td>
        </tr>
        <tr id="table-step" :key="(tabIndex + 5) * 100 + 1">
          <td colspan="7">
            <div class="item-step-box">
              <div
                class="step-item"
                v-for="(item, index) in titleArr"
                :key="index"
              >
                <div>
                  <i
                    :class="
                      tableItem.prostage === item.proStage
                        ? 'iconfont icon-yuanquanxuanzhong'
                        : 'iconfont icon-yuanquan'
                    "
                  ></i>
                </div>
                <div class="step-title" @click="selectItem(index)">
                  {{ item.stageName }}
                </div>
                <div class="icon" v-if="index != 6">
                  <i class="iconfont icon-buzhoujiantou1"></i>
                </div>
                <div class="icon" v-else></div>
              </div>
            </div>
          </td>
        </tr>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    openInfoDrawer: {
      type: Function,
      default: null,
    },
    openCost: {
      type: Function,
      default: null,
    },
    openUpdate: {
      type: Function,
      default: null,
    },
    openAnnexAndMilestoner: {
      type: Function,
      default: null,
    },
    openCollection: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      // 状态数组
      titleArr: [
        {
          proStage: "SalesResearch",
          stageName: "售前调研",
        },
        {
          proStage: "Develop",
          stageName: "研发阶段",
        },
        {
          proStage: "ElectricImplement",
          stageName: "电气实施",
        },
        {
          proStage: "Design",
          stageName: "产品设计",
        },
        {
          proStage: "DebugTogether",
          stageName: "联调阶段",
        },
        {
          proStage: "Waiting4Sign",
          stageName: "等待验收",
        },
        {
          proStage: "Finish",
          stageName: "已完成",
        },
      ],
      active: "1",
      openInfo: true,
    };
  },
  mounted() {},
  methods: {
    clickProject(row) {
      if (!this.openInfo) return;
      this.openInfoDrawer(row);
    },

    setOpenInfo() {
      setTimeout(() => {
        this.openInfo = true;
      }, 1000);
    },

    // 费用按钮
    handCost(row) {
      this.openInfo = false;
      this.openCost(row);
      this.setOpenInfo();
    },

    // 编辑按钮
    handUpdate(row) {
      this.openInfo = false;
      this.openUpdate(row);
      this.setOpenInfo();
    },

    // 回款信息按钮
    handCollection(row) {
      this.openInfo = false;
      this.openCollection(row);
      this.setOpenInfo();
    },

    // 附件与里程碑按钮
    handAnnexAndMilestone(row) {
      this.openInfo = false;
      this.openAnnexAndMilestoner(row);
      this.setOpenInfo();
    },
  },
};
</script>

<style lang="scss" >
.main-box {
  .my-table-box {
    /* border: 1px solid red; */
    height: 458px;
    overflow: auto;

    #table-body {
      > td {
        border: 0.5px solid #eee9e9;
        border-left: 0.5px solid #eee9e9;
        background: #f2f3f3;
        vertical-align: middle;
        height: 40px;
        font-size: 14px;
        text-align: center;

        .update-btn {
          /* border: 1px solid red; */

          width: 50px;
          height: 24px;
          margin-left: 15px;

          font-size: 12px;
        }
        .collection-btn {
          width: 6ch;
          height: 24px;
          /* border: 1px solid red; */
          margin-left: 14px;
        }
        .mil-anne-btn {
          width: 110px;
          height: 24px;
          margin-left: 6px;
          /* border: 1px solid red; */
        }

        .update-btn,
        .collection-btn,
        .mil-anne-btn {
          font-size: 12px;
          border-radius: 5px;
          line-height: 24px;
          color: #fff;
          background: #63b35c;
        }

        .update-btn,
        .collection-btn,
        .mil-anne-btn:hover {
          cursor: pointer;
        }
        .collection-btn:hover {
          background: rgba($color: #63b35c, $alpha: 0.7);
        }
        .update-btn:hover {
          background: rgba($color: #63b35c, $alpha: 0.7);
        }
        .mil-anne-btn:hover {
          background: rgba($color: #63b35c, $alpha: 0.7);
        }

        .pro-name-box {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 343.5px;
          padding: 0 10px;
        }
      }
    }
    #table-body:hover {
      cursor: pointer;
    }

    #table-step {
      > td {
        /* border: 1px solid #df1717; */
      }
    }
    .item-step-box {
      /* border: 1px solid red; */
      border-right: 1px solid #eee9e9;

      background: #f2f3f3;
      width: 68%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      padding-left: 26px;
      display: flex;
      justify-content: start;
    }

    .step-item {
      width: 130px;
      height: 30px;
      line-height: 200%;
      display: flex;
      /* background: #f3f6ff; */

      .step-title {
        /* width: 50px; */
        /* margin-right: 14px; */
        font-size: 12px;
        color: black;
      }

      .icon {
        width: 30px;
      }
    }
  }

  .my-table-box::-webkit-scrollbar {
    width: 4px;
  }
  .my-table-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: fade(rgb(78, 182, 214), 60%);
  }
  .my-table-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(rgb(78, 182, 214), 30%);
  }

  #table-title {
    /* border: 1px solid red; */
    color: black;
    /* position: fixed; */
    /* top: 10; */

    :first-child {
      border-left: 1px solid #eee9e9;
    }
    > th {
      border: 0.5px solid #eee9e9;
      background: #fff;
      border-left: none !important;
      height: 40px;
      width: 100%;

      > div {
        font-size: 16px;
        font-weight: bold;
        line-height: 40px;
      }
    }
  }
}

.el-table__body tr.current-row > td {
  background-color: #c1fac9 !important;
}
</style>